<form action method="post" enctype="multipart/form-data" data-v-url="user/login" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">
	
	<input type="hidden" name="csrf" data-v-csrf>
	
	<div class="login-form" data-v-if-not="component.user_id">
		
		<div class="mb-3">
			<label class="form-label" for="input-email">E-Mail Address</label>
			<input type="email" name="email" value placeholder="E-Mail Address" id="input-email" class="form-control" required>
		</div>
		
		<div class="mb-3">
			<label class="form-label" for="input-password">Password</label>
			<input type="password" minlength="4" autocorrect="off" autocomplete="current-password" name="password" value="" placeholder="Password" id="input-password" class="form-control" required>
		</div>
		
		<button type="submit" value="Login" class="btn btn-primary btn-login@@if (typeof btnClass !== "undefined"){ @@btnClass}">
			
			<span class="loading d-none">
				<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
				</span>
				<span>Authenticating</span>...
			</span>

			<span class="button-text">
				Login <i class="la la-arrow-right float-end ms-2"></i>
			</span>
		
		</button>	
		<div class="my-2"></div>
		<a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgotten Password</a>
		
		<div class="my-2"></div>
		<!--
		<a href="#">
			<span class="btn btn-secondary btn-sm">
				  <i class="lab la-google la-lg"></i>
			</span>
		</a>
		<a href="#">
			<span class="btn btn-secondary btn-sm">
			  <i class="lab la-facebook la-lg"></i>
			</span>
		</a> -->
		<hr>
		<span>Don’t have an account?</span>
		<a href="/user/signup" data-v-url="user/signup/index">Register Account</a>						
					
	</div>							
	
	
	<div class="user-form" data-v-if="component.user_id">
		  <div class="text-center">Welcome <b data-v-user-first_name data-filter-capitalize>John</b> <b data-v-user-last_name data-filter-capitalize>Doe</b></div>
		  
		  <div class="dropdown-divider opacity-50 my-3"></div>

		  <ul class="m-3 list-unstyled">
			<li><a href="user" data-v-url="user/index"><i class="la la-user la-lg text-muted m-1"></i><span>My account</span></a></li>
			<li><a href="user/comments" data-v-url="user/comments/index"><i class="la la-comment la-lg text-muted m-1"></i><span>Comments</span></a></li>
			<li><a href="user/orders" data-v-url="user/orders/index"><i class="la la-shopping-bag la-lg text-muted m-1"></i><span>Orders</span></a></li>
			<li><a href="user/downloads" data-v-url="user/downloads/index"><i class="la la-hand-holding-heart la-lg text-muted m-1"></i><span>Downloads</span></a></li>
			<li><a href="user/wishlist" data-v-url="user/wishlist/index"><i class="la la-download la-lg text-muted m-1"></i><span>Wishlist</span></a></li>
			<li><a href="user/profile" data-v-url="user/profile/index"><i class="la la-cogs la-lg text-muted m-1"></i><span>Profile</span></a></li>
		  </ul>									


		<input type="hidden" name="logout">
		
		<button type="submit" value="logout" class="btn btn-sm btn-primary@@if (typeof btnClass !== "undefined"){ @@btnClass}">
			
			<span class="loading d-none">
				<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
				</span>
				<span>Loading ...</span>...
			</span>

			<span class="button-text">
				<i class="la la-sign-out-alt la-lg m-1"></i><span>Log out</span></a>
			</span>
		
		</button>	
	</div>
</form>